<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" placeholder="请输入学号" />
		<input type="text" placeholder="请输入姓名" />
		<input type="text" placeholder="请输入性别" />
		<input type="text" placeholder="请输入班级" />
		<input type="button" class="add" value="添加" />
		<input type="text" placeholder="请输入搜索内容"/>
		<!--根据学号排序-->
		<input type="button"  value="搜索"/>
		<input type="button"  value="排序"/>
		<table border="" width="500">
			<tr><th>学号</th><th>姓名</th><th>性别</th><th>班级</th><th>操作</th></tr>
		</table>
		<script type="text/javascript">
		
			function getInfo(){
				var inps = document.querySelectorAll("input[type]");
				var num = inps[0].value,
					name = inps[1].value,
					sex = inps[2].value,
					clas = inps[3].value,
					txt = inps[5].value;
				//es5字符串拼接方法:var tr = "<tr><td>"+num+"</td><td>"+name+"</td><td>"+sex+"</td><td>"+clas+"</td></tr>"	
				
				//es6字符串拼接方法:
				var tr = `
							<tr>
								<td>${num}</td>
								<td>${name}</td>
								<td>${sex}</td>
								<td>${clas}</td>
								<td align="center"><button class="del">删除</button><button>修改</button><button>确认修改</button></td>
							</tr>
						 `
				return tr;
			}
				//添加条目
			var add = document.querySelector(".add");
			var tab = document.querySelector("table");
			add.addEventListener("click",function(){
				tab.innerHTML += getInfo();
				
			var del = document.getElementsByClassName("del");
			for(var i=0;i<del.length;i++){
				del[i].addEventListener("click",function(){
					del[i].parentNode.parentNode.parentNode.remove();
				});
			};
			});
			
			getInfo();
		</script>
	</body>
</html>
